<template>
  <div ref="chartRef" :style="{ height, width }"></div>
</template>
<script lang="ts">
import { defineComponent, PropType, ref, Ref, reactive, watchEffect } from 'vue';
import { useECharts } from '/@/hooks/web/useECharts';
import { GaugeChart } from 'echarts/charts';
import { cloneDeep } from 'lodash-es';
export default defineComponent({
  name: 'EchartsGauge',
  props: {
    chartData: {
      type: Object as PropType<Object>,
      default: () => [],
    },
    option: {
      type: Object,
      default: () => ({}),
    },
    width: {
      type: String as PropType<string>,
      default: '100%',
    },
    height: {
      type: String as PropType<string>,
      default: 'calc(40vh)',
    },
    detailParam: {
      type: String as PropType<string>,
    },
  },
  setup(props) {
    const chartRef = ref<HTMLDivElement | null>(null);
    const { setOptions, echarts } = useECharts(chartRef as Ref<HTMLDivElement>);
    const option = reactive({
      series: [
        {
          type: 'gauge',
          startAngle: 180,
          endAngle: 0,
          center: ['50%', '75%'],
          radius: '115%',
          min: 0,
          max: 10,
          splitNumber: 2,
          axisLine: {
            lineStyle: {
              width: 4,
              color: [
                [0.25, '#7CFFB2'],
                [0.75, '#FDDD60'],
                [1, '#FF6E76']
              ]
            }
          },
          pointer: {
            icon: 'path://M12.8,0.7l12,40.1H0.7L12.8,0.7z',
            length: '12%',
            width: 10,
            offsetCenter: [0, '-55%'],
            itemStyle: {
              color: 'auto'
            }
          },
          axisTick: {
            length: 12,
            lineStyle: {
              color: 'auto',
              width: 2
            }
          },
          splitLine: {
            length: 16,
            lineStyle: {
              color: 'auto',
              width: 5
            }
          },
          axisLabel: {
            color: '#464646',
            fontSize: 20,
            distance: -40,
            rotate: 'tangential',

          },
          title: {
            offsetCenter: [0, '0%'],
            fontSize: 15
          },
          detail: {
            fontSize: 20,
            offsetCenter: [0, '-25%'],
            valueAnimation: true,
            formatter: function (value) {
              return value + '';
            },
            color: 'inherit'
          },
          data: [
            {
              value: 30,
              name: 'Grade Rating'
            }
          ]
        }
      ]
    });

    watchEffect(() => {
      props.chartData && initCharts();
    });

    function initCharts() {
      echarts.use(GaugeChart);
      if (props.option) {
        Object.assign(option, cloneDeep(props.option));
      }
      option.series[0].detail.formatter = props.detailParam;
      option.series[0].data[0].name = props.chartData.name;
      option.series[0].data[0].value = props.chartData.value;
      option.series[0].max = props.chartData.max;
      option.series[0].min = props.chartData.min;
      setOptions(option);
    }
    return { chartRef };
  },
});
</script>
